/**
 * Created by 丶龟 on 2017/8/25.
 */

"use strict";

//=============
// 引入程序依赖
//=============
import React, { Component } from 'react' ;
import { connect } from 'react-redux' ;
import { mapStateToProps, mapDispatchToProps } from './MobileBindingRedux' ;
import { Link, browserHistory } from 'react-router' ;

//交互依赖
import NetworkEngine from '../../utils/NetworkEngine' ;
import UrlManager from '../../utils/UrlManager' ;

//images
import gantan from "../../static/img/h5/gantan.png"
import logo from "../../static/img/h5/logo.png";



class MobileBindingContainer extends Component{
    constructor(props){
        super(props) ;
        this.state = {
            code : "" ,
            error: "0",
        }
    }

    regisAccount(e){
        this.state.error = "0";
        this.checkDisplayName();
        this.checkPhone();
        this.checkPassword();
        this.checkCode();
        e.preventDefault() ;
        MtaH5.clickStat('H5_Binding_002');
        if(this.state.error == "1"){
            return false;
        }else{
            let urlManager = new UrlManager();
            NetworkEngine(
                "POST",
                urlManager.regisAccount(),
                {
                    phone:this.props.params.id,
                    password:this.refs.password.value,
                    code:this.refs.code.value,
                    displayName:this.refs.displayName.value
                }
            ).then(
                data => {
                    let _data = data.data.data ;
                    console.log("===========账号信息===========",_data);
                    sessionStorage.setItem("id",_data.id) ;
                    sessionStorage.setItem("displayName",_data.displayName) ;
                    sessionStorage.setItem("phone",_data.phone) ;
                    sessionStorage.setItem("authenticationStatus",_data.authenticationStatus) ;
                    if(data.data.status === "0"){
                        browserHistory.push("/") ;
                    }
                    if (data.data.status === "1") {
                        console.log("=============手机已被注册==================");
                        console.log("===========================================");
                    }
                }
            ).catch(
                err=>{

                }
            )
        }
    }
    // App注册昵称验证
    checkDisplayName() {
        if (this.refs.displayName.value === "") {
            $(this.refs.wrongName).show();
            this.state.error = "1";
        } else {
            $(this.refs.wrongName).hide();
        }
    }

    // App注册密码校验
    checkPassword() {
        var str = this.refs.password.value;
        var reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
        if (!reg.test(str)||this.refs.password.value === "") {
            $(this.refs.wrongPassword).show();
        }else{
            $(this.refs.wrongPassword).hide();
        }
    }

    // App注册验证码校验
    checkCode() {
        if (this.refs.code.value === "") {
            $(this.refs.wrongCode).show();
            this.state.error = "1";
        } else {
            $(this.refs.wrongCode).hide();
        }
    }

    // App手机验证码获取
    getPhoneCode(e) {
        e.preventDefault();
        MtaH5.clickStat('H5_Binding_001');
        console.log("================手机号是=================="+this.props.params.id)
        if(this.refs.phone.value === ""){
            $(this.refs.wrongNull).show();
        }else{
            console.log("===============校验=================")
            let phone = this.refs.phone.value;
            console.log(phone);
            var zhengzphone = /^1[34578]\d{9}$/;
            console.log(zhengzphone.test(phone));
            zhengzphone.test(phone) ? this.sendCode(e) : $(this.refs.wrongPhone).show();
        }
    }

    sendCode(e) {
        console.log("==============sendCode================")
        let urlManager = new UrlManager();
        this.getyzm();
        e.preventDefault();
        NetworkEngine(
            "post",
            urlManager.getPhoneCode(),
            {
                phone: this.refs.phone.value,
            }
        ).then(
            data => {

                let _data = data.data.data.code;
                this.setState({code: _data});
                if (data.data.status === "1") {
                    $(this.refs.wrongPhone).show();

                } else {
                    $(this.refs.wrongPhone).hide();

                }
                $(this.refs.phoneErrorMessage).text(data.data.error_message);
            }
        ).catch(
            err => {

            }
        )
    }

    getyzm() {
        console.log("================getyzm=====================")
        // 计数变量
        var t = 60;
        var time = setInterval(daojishi, 1000);
        // 获得按钮对象
        var getyzm = this.refs.yzm;

        function daojishi() {
            if (t > 0) {
                t--;
                getyzm.innerText = t + '秒' + '重新获取';
                getyzm.disabled = true;
            } else {
                getyzm.innerText = '重新获取';
                clearInterval(time);//清理定时器
                getyzm.disabled = false;
            }
        }
    }

    render(){
        return(
            <div className="login-form">
                <div className="logo"><img src={logo} alt="咪吱logo"/></div>
                <form>
                    <p className="username binding-p1">绑定手机</p>
                    <p className="binding-three">
                        <span>绑定QQ到手机</span><span>{this.props.params.id.substr(0,3)+"****"+this.props.params.id.substr(7)}</span><Link to="/MobilePhone">修改</Link>
                        <input  className="bindPhone" ref="phone" value={this.props.params.id}/>
                    </p>
                    <div className="wrong" ref="wrongMessage">
                        <img src={gantan} alt="感叹"/>
                        <span>该手机号已被注册</span>

                    </div>
                    <div className="input-f">
                        <input type="text" className="input" ref="displayName" placeholder="昵称" onBlur={this.checkDisplayName.bind(this)}/>
                        <div className="wrong" ref="wrongName">
                            <img src={gantan} alt="感叹"/>
                            <span>昵称不能为空</span>
                        </div>
                    </div>
                    <div className="input-f">
                        <div className="proving-f">
                            <input type="text" className="proving" ref="code" placeholder="手机验证码" onBlur={this.checkCode.bind(this)}/>
                            <div className="wrong" ref="wrongCode">
                                <img src={gantan} alt="感叹"/>
                                <span ref="codeErrorMessage">验证码有误</span>
                            </div>
                            <button className="proving-btn" ref="yzm" onClick={this.getPhoneCode.bind(this)}>获取验证码</button>
                        </div>
                    </div>
                    <div className="input-f">
                        <input type="password" className="input" ref="password" placeholder="设置密码，6-12位字母和数字组成" maxLength={12} onBlur={this.checkPassword.bind(this)}/>
                        <div className="wrong" ref="wrongPassword">
                            <img src={gantan} alt="感叹"/>
                            <span ref="passwordErrorMessage">密码应该为6-12位字母和数字组成</span>
                        </div>
                    </div>
                    <button type="btn" className="form-btn orange-btn" onClick={this.regisAccount.bind(this)}>确定</button>
                    <span className="form-a margin-1" href="logon.html"><Link to="/login" className="logon">返回登录</Link></span>
                </form>
            </div>
        )
    }
}

const MobileBinding = connect(mapStateToProps,mapDispatchToProps)(MobileBindingContainer) ;

export { MobileBinding as default } ;

